<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="styleImageString">
              <j-image-upload isMultiple  v-model="model.styleImageString" ></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="款号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="codeNum">
              <a-input v-model="model.codeNum" @change="setStyleName"  placeholder="款号" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="款类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="styleCate">
              <j-dict-select-tag type="list" v-model="model.styleCate"  dictCode="style_type" placeholder="请选择款类" />
            </a-form-model-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-model-item label="款式名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入款式名称" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="所属客户" :labelCol="labelCol" :wrapperCol="wrapperCol"  prop="customerInfoId">
              <j-search-select-tag v-model="model.customerInfoId" placeholder="请选择所属客户" dict="customer_info,cus_code,id" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="单价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unitPrice">
              <a-input :min="0" v-model="model.unitPrice" @change="updateUnitPriceTax" placeholder="请输入单价" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="单价(含税)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unitPriceTax">
              <a-input :min="0" v-model="model.unitPriceTax" placeholder="请输入单价(含税)" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="工费" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="labourCost">
              <a-input :min="0" v-model="model.labourCost" placeholder="请输入工费" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="电镀费" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="electroplateCost">
              <a-input :min="0" v-model="model.electroplateCost" placeholder="请输入电镀费" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="净金重" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goldWeight">
              <a-input v-model="model.goldWeight" placeholder="请输入净金重"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="净银重" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="silverModelWeight">
              <a-input v-model="model.silverModelWeight" placeholder="请输入净银重" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="蜡重" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waxModelWeight">
              <a-input v-model="model.waxModelWeight" placeholder="请输入蜡重" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="石重(ct)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pureStoneWeight">
              <a-input v-model="model.pureStoneWeight" placeholder="请输入石重(ct)" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="连石重(g)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="withStoneWeight">
              <a-input v-model="model.withStoneWeight" placeholder="请输入连石重(g)" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="耗率(%)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="attritionRate">
              <a-input :min="0" v-model="model.attritionRate" placeholder="请输入耗率(%)" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="长度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="length">
              <a-input v-model="model.length" placeholder="请输入长度" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="宽度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="width">
              <a-input v-model="model.width" placeholder="请输入宽度" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="胶膜号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="modelNum">
              <a-input v-model="model.modelNum" placeholder="请输入胶膜号" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="难度级别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="difficultLevel">
              <j-dict-select-tag type="list" v-model="model.difficultLevel"  dictCode="difficult_level" placeholder="请选择难度级别" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="款式系列" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="styleSeries">
              <a-input v-model="model.styleSeries" placeholder="请输入款式系列" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="手寸规格单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="styleSizeUnit">
              <j-dict-select-tag type="list" v-model="model.styleSizeUnit"  dictCode="style_size_unit" placeholder="请选择手寸规格单位" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="手寸规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="styleSize">
              <a-textarea v-model="model.styleSize" placeholder="请输入手寸规格" ></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="生产要求" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productionRequirement">
              <a-textarea v-model="model.productionRequirement" placeholder="请输入生产要求" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="电镀要求" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="electroplateRequirement">
              <a-textarea v-model="model.electroplateRequirement" placeholder="请输入电镀要求" />
            </a-form-model-item>
          </a-col>
          <!--<a-col :xs="24" :sm="12">
            <a-form-model-item label="起版要求" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="platemakingRequirement">
              <a-textarea v-model="model.platemakingRequirement"  placeholder="请输入起版要求" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="烤漆要求" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paintRequirement">
              <a-textarea v-model="model.paintRequirement" placeholder="请输入烤漆要求" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="包装要求" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="packRequirement">
              <a-textarea v-model="model.packRequirement"  />
            </a-form-model-item>
          </a-col>-->
        </a-row>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>

import { httpAction } from '@/api/manage'
import { duplicateCheck } from '@/api/api'

let validatorCodeTimer = null

export default {
  name: "StyleInfoModal",
  components: {
  },
  data () {
    return {
      title:"操作",
      width:1200,
      visible: false,
      model:{
        codeNumKey:"style_code",
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        codeNum: [
          { required: true, message: '请输入款号!'},
          {
            validator: (rule, value, callback) => {
              // 函数消抖的简单实现，防止一段时间内发送多次请求
              if (validatorCodeTimer) {
                // 停止上次开启的定时器
                clearTimeout(validatorCodeTimer)
              }
              validatorCodeTimer = setTimeout(() => {
                duplicateCheck({
                  tableName: 'style_info',
                  fieldName: 'code_num',
                  fieldVal: value,
                  dataId: this.model.id
                }).then((res) => {
                  if (res.success) {
                    callback()
                  } else {
                    callback(res.message)
                  }
                }).catch(console.error)
              }, 300)
            }
          }
        ]
      },
      url: {
        add: "/styleInfo/styleInfo/add",
        edit: "/styleInfo/styleInfo/edit",
      }
    }
  },
  created () {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  methods: {
    updateUnitPriceTax() { //更新含税单价
      this.model.unitPriceTax = Number(this.model.unitPrice / 0.92).toFixed(2)
    },
    add () {
      this.edit(this.modelDefault);
    },
    edit (record) {
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    close () {
      this.$emit('close');
      this.visible = false;
      this.$refs.form.clearValidate();
    },
    handleOk () {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if(!this.model.id){
            httpurl+=this.url.add;
            method = 'post';
          }else{
            httpurl+=this.url.edit;
            method = 'put';
          }
          httpAction(httpurl,this.model,method).then((res)=>{
            if(res.success){
              that.$message.success(res.message);
              that.$emit('ok');
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }else{
          return false
        }
      })
    },
    handleCancel () {
      this.close()
    },
    setStyleName() {
      this.model.name = this.model.codeNum
    }

  }
}
</script>